/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import ajaxFn from './ajax';
import './yu.css';

// 发送请求, 实现动态渲染图片
ajaxFn({
    baseUrl: 'http://114.132.122.73:7001',
    url: '/api/web/carouselGroup/get',
    method: 'GET',
    data: {
        projectId: 24,
        carouselGroupId: 63,
    },
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
    callBack: (res) => {
        // 所有操作都是在异步中执行
        if (res.code === 200) {
            let carousels = res.data.w_carousels;
            console.log(carousels);
            // 初始化轮播图
            init(carousels);
            // 执行轮播图操作
            eventFn();
        } else {
            console.log('出现了其他问题');
        }
    },
});

// 初始化渲染
function init(data) {
    let ul = document.querySelector('.img-box > ul');
    let dotBox = document.querySelector('.dot-box');

    // innerHTML
    let liHTML = '';
    let spanHTML = '';
    data.forEach((item) => {
        liHTML += `<li><img src="${item.url}" /></li>`;
        spanHTML += '<span></span>';
    });
    // 一次性写入
    ul.innerHTML = liHTML;
    dotBox.innerHTML = spanHTML;
    // 添加激活类名 (第一个元素)
    ul.firstElementChild.classList.add('li-active');
    dotBox.firstElementChild.classList.add('dot-active');
}

//轮播图操作
function eventFn() {
    let dots = document.querySelectorAll('.dot-box > span');
    let ul = document.querySelector('.img-box > ul');
    let list = document.querySelectorAll('.img-box > ul > li');
    let box = document.querySelector('.img-box');

    // 克隆第一张和最后一张 (无缝切换)
    // 1. 把最后一张克隆到第一张 cloneNode(true)
    ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
    // 2. 把第二张克隆到最后一张 cloneNode(true)
    ul.appendChild(ul.children[1].cloneNode(true));
    // 位置移动到第二张 (克隆完成之后, 第二张才是真正的第一张)
    ul.style.transform = 'translateX(-100%)';
    // 遇到了问题: 加载js的时候会出现过度效果
    // 如何解决 --- 先移动, 然后再恢复过度效果 (延时执行)
    setTimeout(() => {
        ul.style.transition = 'transform 1s';
    }, 100);

    // 需要控制的值, 标记数值 (初始值)
    let index = 1;
    // 保存上一次操作的值 (移除类名)
    let lastIndex = 1;

    // 下一张函数
    function arrowRightFn() {
        // console.log('下一张函数');
        ul.style.transform = `translateX(-${++index}00%)`;
        // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
        if (index > list.length) {
            index = 1;
            // 等待过度效果结束 (transitionend 事件)
            ul.addEventListener(
                'transitionend',
                () => {
                    // console.log('完成过度');
                    // 关闭过渡效果
                    ul.style.transition = 'none';
                    // 回到第二张的位置
                    ul.style.transform = `translateX(-${index}00%)`;
                    // 重置 (更新元素的新样式)
                    window.getComputedStyle(ul).transform;

                    // 恢复动画
                    ul.style.transition = 'transform 1s';
                },
                {
                    // 绑定一次事件
                    once: true,
                }
            );
        }
        dotsColor();
    }
    // 上一张函数
    function arrowLeftFn() {
        // console.log('上一张函数');
        ul.style.transform = `translateX(-${--index}00%)`;
        // 判断index是否到达第一张 (最后一张的克隆体)
        if (index < 1) {
            // list 的长度克隆之后的还是克隆前的?
            // index = list.length;
            index = ul.children.length - 2;

            // 等待过度效果结束 (transitionend 事件)
            ul.addEventListener(
                'transitionend',
                () => {
                    // console.log('完成过度');
                    // 关闭过渡效果
                    ul.style.transition = 'none';
                    // 回到第二张的位置
                    ul.style.transform = `translateX(-${index}00%)`;
                    // 重置 (更新元素的新样式)
                    window.getComputedStyle(ul).transform;

                    // 恢复动画
                    ul.style.transition = 'transform 1s';
                },
                {
                    // 绑定一次事件
                    once: true,
                }
            );
        }
        dotsColor();
    }

    // 小圆点颜色函数
    function dotsColor() {
        // console.log('lastIndex', lastIndex - 1);
        // console.log('index', index - 1);
        dots[lastIndex - 1].classList.remove('dot-active');
        dots[index - 1].classList.add('dot-active');
        // 操作完成之后再保留操作值index
        lastIndex = index;
    }

    // 给小圆点绑定点击事件
    dots.forEach((el, elIndex) => {
        el.addEventListener('click', () => {
            // 当前小圆点控制轮播图位置, 需要重置index
            index = elIndex + 1;
            ul.style.transform = `translateX(-${index}00%)`;
            // 小圆点激活类函数
            dotsColor();
        });
    });

    // 自动轮播
    // 自动轮播
    autoPlay();
    function autoPlay() {
        // 停止上一个定时器任务 (解决切换屏幕的bug)
        // clearInterval(timer);
        timer = setInterval(() => {
            // 下一张函数
            arrowRightFn();
        }, 2000);
    }

    // 停止自动轮播 (鼠标移入轮播图范围之内)
    box.addEventListener('mouseenter', () => {
        clearInterval(timer);
    });

    // 继续开始轮播 (鼠标移出轮播图范围)
    box.addEventListener('mouseleave', () => {
        autoPlay();
    });

    // visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

    document.addEventListener('visibilitychange', () => {
        // document.hidden 检测文档是否为隐藏
        // document.visibilityState

        // console.log('hidden', document.hidden);
        // console.log('visibilityState', document.visibilityState);

        if (document.hidden) {
            clearInterval(timer);
            // console.log('隐藏');
        } else {
            autoPlay();
            // console.log('显示');
        }
    });
}

// 自然
ajaxFn({
    baseUrl: 'http://127.0.0.1:7001',
    url: '/api/web/classify/getById',
    method: 'GET',
    data: {
        id: 12,
        projectId: 60,
    },
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
    callBack: (res) => {
        // 所有操作都是在异步中执行
        if (res.code === 200) {
            let carousels = res.data.w_cases;
            console.log(carousels);
            inits(carousels);
        } else {
            console.log('出现了其他问题');
        }
    },
});

// 自然初始化渲染
function inits(data) {
    let natureImg = document.querySelector('.natureImg');
    let dotSpan = document.querySelector('.dotSpan');

    // innerHTML
    let innerNature = '';
    let innerDotSpan = '';
    data.forEach((item, index) => {
        // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
        innerDotSpan += '';
        innerNature += `
        <div>
          <div><img data-src="${item.cover}" alt="" class="lazy"></div>
            <div>
              <p>${item.name}</p>
              <p>设备：其他</p>
              <p>${item.content}</p>
              <div>
                  <p>大白啦！</p>
                  <p>2020年11月6日</p>
              </div>              
            </div>
          </div>
        `;
    });
    // 一次性写入
    natureImg.innerHTML = innerNature;
    // dotSpan.innerHTML = innerDotSpan;

    // 添加激活类名 (第一个元素)
    dotSpan.firstElementChild.classList.add('dots-active');
    //     dotBox.firstElementChild.classList.add('dot-active');
}

// 点击轮播
fn1();
function fn1() {
    let span = document.querySelectorAll('.dotSpan> span');
    console.log(span);
    let natureImg = document.querySelector('.natureImg');
    console.log(natureImg);
    let index = 0;

    let lsatIdex = 0;
    span.forEach((el, elIedx) => {
        el.addEventListener('click', () => {
            console.log(123);
            index = elIedx;
            natureImg.style.transform = `translateX(-${index}00%)`;
            fn2();
        });
    });

    // 小圆点颜色
    function fn2() {
        span[lsatIdex].classList.remove('dots-active');
        span[index].classList.add('dots-active');
        lsatIdex = index;
    }
}
// 热门标签
// 发送请求, 实现动态渲染图片
ajaxFn({
    baseUrl: 'http://127.0.0.1:7001',
    url: '/api/web/classify/getById',
    method: 'GET',
    data: {
        id: 60,
        projectId: 19,
    },
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
    callBack: (res) => {
        // 所有操作都是在异步中执行
        if (res.code === 200) {
            let carousels = res.data.w_cases;
            console.log(carousels);
            zhirang(carousels);
        } else {
            console.log('出现了其他问题');
        }
    },
});

// 热门标签初始化渲染
function zhirang(datas) {
    let remeng = document.querySelector('.remeng');
    console.log(remeng);

    // innerHTML
    let innerEnmeng = '';
    // let innerDotSpan ="";
    datas.forEach((item, index) => {
        // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
        // innerDotSpan += ``
        innerEnmeng += `
      <div>
          <div><img data-src="${item.cover}" class="le"  alt=""></div>
          <div><p>${item.name}</p></div>
      </div>
      `;
    });
    // 一次性写入
    remeng.innerHTML = innerEnmeng;
}
fn3();
function fn3() {
    let dot = document.querySelectorAll('.dotYd>div');
    console.log(dot);
    let remeng = document.querySelector('.remeng');
    console.log(remeng);
    let index = 0;

    let lsatIdex = 0;
    dot.forEach((el, elIedx) => {
        el.addEventListener('click', () => {
            console.log(123);
            index = elIedx;
            remeng.style.transform = `translateX(-${index}00%)`;
            fn4();
        });
    });

    // 小圆点颜色
    function fn4() {
        dot[lsatIdex].classList.remove('dot');
        dot[index].classList.add('dot');
        lsatIdex = index;
    }
}

// 城市
ajaxFn({
    baseUrl: 'http://127.0.0.1:7001',
    url: '/api/web/classify/getById',
    method: 'GET',
    data: {
        id: 41,
        projectId: 19,
    },
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
    },
    callBack: (res) => {
        // 所有操作都是在异步中执行
        if (res.code === 200) {
            let carousels = res.data.w_cases;
            console.log(carousels);
            chengshi(carousels);
        } else {
            console.log('出现了其他问题');
        }
    },
});

// 初始化渲染
function chengshi(da) {
    let chengshi = document.querySelector('.chengshi');
    console.log(chengshi);

    // innerHTML
    let innerCs = '';
    // let innerDotSpan ="";
    da.forEach((item, index) => {
        // innerDotSpan += (Math.ceil(index % 4) === 0) ? `<span></span>` : "";
        // innerDotSpan += ``
        innerCs += `
      <div>
          <div><img data-src="${item.cover}" class="yu" alt=""></div>
            <div>
              <p>${item.name}</p>
              <p>设备：其他</p>
              <p>${item.content}</p>
              <div>
                  <p>大白啦！</p>
                  <p>2020年11月6日</p>
              </div>              
            </div>
          </div>
      `;
    });
    // 一次性写入
    chengshi.innerHTML = innerCs;
}
fn5();
function fn5() {
    let dots = document.querySelectorAll('.dotss>div');
    console.log(dots);
    let chengshi = document.querySelector('.chengshi');
    console.log(chengshi);
    let index = 0;

    let lsatIdex = 0;
    dots.forEach((el, elIedxs) => {
        el.addEventListener('click', () => {
            console.log(123);
            index = elIedxs;
            chengshi.style.transform = `translateX(-${index}00%)`;
            fn6();
        });
    });

    // 小圆点颜色
    function fn6() {
        dots[lsatIdex].classList.remove('dots');
        dots[index].classList.add('dots');
        lsatIdex = index;
    }
}
//懒加载

function lazyImg() {
    let imglist = document.querySelectorAll('.lazy');
    let list = document.querySelector('.natureImg');
    // console.log(imglist);
    // console.log(list1)
    // console.log(list1.offsetTop)

    imglist.forEach((el) => {
        // console.log(document.documentElement.clientHeight )
        // console.log(document.documentElement.scrollTop)

        if (
            document.documentElement.clientHeight +
                document.documentElement.scrollTop >
            list.offsetTop
        ) {
            el.classList.remove('lazy');
            el.src = el.dataset.src;
        }
    });
}
// document.onscroll= lazyImg

function yu() {
    let imglist = document.querySelectorAll('.yu');
    let list = document.querySelector('.chengshi');
    // console.log(imglist);
    // console.log(list)
    // console.log(list.offsetTop)

    imglist.forEach((el) => {
        // console.log(document.documentElement.clientHeight )
        // console.log(document.documentElement.scrollTop)

        if (
            document.documentElement.clientHeight +
                document.documentElement.scrollTop >
            list.offsetTop
        ) {
            el.classList.remove('yu');
            el.src = el.dataset.src;
        }
    });
}
function le() {
    let imglist = document.querySelectorAll('.le');
    let list = document.querySelector('.remeng');
    // console.log(imglist);
    // console.log(list)
    // console.log(list.offsetTop)

    imglist.forEach((el) => {
        // console.log(document.documentElement.clientHeight )
        // console.log(document.documentElement.scrollTop)

        if (
            document.documentElement.clientHeight +
                document.documentElement.scrollTop >
            list.offsetTop
        ) {
            el.classList.remove('le');
            el.src = el.dataset.src;
        }
    });
}
document.onscroll = () => {
    yu();
    lazyImg();
    le();
};
